import { FC, useState } from "react"
import Taro, { useRouter } from '@tarojs/taro'
import wx from '../../resource/wx.png'
import zfb from '../../resource/zfb.png'
import card from '../../resource/card.png'
import wallet from '../../resource/wallet.png'
import check from '../../resource/checked.png'
import uncheck from '../../resource/uncheck.png'
import style from './style.less'

const Cashier: FC = () => {
  const router = useRouter()
  const amount = Number(router.params.amount)
  const cargoId = router.params.cargoId
  const type = Number(router.params.type)
  const payAmount = Number(router.params.payAmount)
  const preferenceType = Number(router.params.preferenceType)
  const couponId = router.params.couponId

  const [select, setSelect] = useState(1)

  console.log(Taro.getStorageSync('token'), cargoId, select, type, payAmount, preferenceType, couponId, amount);


  const pay = () => {
    Taro.showLoading({ title: '加载中' })
    Taro.request({
      url: 'http://139.9.123.88:8083/fta-trade/pay/payment',
      method: 'POST',
      data: JSON.stringify({
        openId: Taro.getStorageSync('token'),
        cargoId: cargoId,
        cardId: Taro.getStorageSync('token'),
        orderNumber: '',
        payType: select,
        payMode: type,
        payAmount: payAmount,
        preferenceType: preferenceType,
        couponId: couponId,
        netDeposit: amount
      }),
      success: (data) => {
        Taro.hideLoading()
        if (data.data.result) {
          Taro.reLaunch({ url: '/packageA/depositSuccess/index' })
        } else {
          Taro.reLaunch({ url: '/packageA/depositFail/index' })
        }
      },
      fail: () => {
        Taro.hideLoading()

        console.log('支付失败');
      }
    })
  }

  return (
    <div className={style.root}>
      <div className="amount">¥ {payAmount + '.00'}</div>
      <div className="box">
        <div className="container">
          <img src={wx} alt="" />
          <div>微信支付</div>
          <img src={select === 1 ? check : uncheck} alt="" onClick={() => { setSelect(1) }} />
        </div>
        <div className="line" />
        <div className="container">
          <img src={zfb} alt="" style={{ width: Taro.pxTransform(56), height: Taro.pxTransform(56), marginLeft: Taro.pxTransform(54) }} />
          <div style={{ marginLeft: Taro.pxTransform(54) }}>支付宝支付</div>
          <img src={select === 2 ? check : uncheck} alt="" onClick={() => { setSelect(2) }} />
        </div>
        <div className="line2" />
        <div className="container">
          <img src={card} alt="" />
          <div>银行卡支付</div>
          <img src={select === 3 ? check : uncheck} alt="" onClick={() => { setSelect(3) }} />
        </div>
        <div className="line3" />
        <div className="container">
          <img src={wallet} alt="" style={{ width: Taro.pxTransform(56), height: Taro.pxTransform(56), marginLeft: Taro.pxTransform(54) }} />
          <div style={{ marginLeft: Taro.pxTransform(54) }}>钱包支付</div>
          <img src={select === 4 ? check : uncheck} alt="" onClick={() => { setSelect(4) }} />
        </div>
      </div>
      <div className="pay" onClick={pay}>确认支付 {payAmount + '.00元'}</div>
    </div>
  )
}

export default Cashier